<template>
    <div>
        <el-button type="primary" plain @click="handleInput" :loading="upload.isUploading" class="" icon="Upload">
            <!-- <Icon icon="UploadFilled" class="mr-5px" /> -->
            导入
        </el-button>

        <el-dialog title="导入模版文件" v-model="upload.open" width="400px" append-to-body>
            <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url"
                :disabled="upload.isUploading" :on-exceed="handleExceed" :on-success="submitFormSuccess"
                :on-error="submitFormFailure" :auto-upload="false" drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text"><em>点击上传</em></div>
                <template #tip>
                    <span>仅允许导入xls、xlsx格式文件。</span>
                </template>
            </el-upload>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="importTemplate">下载模板</el-button>
                    <el-button type="primary" @click="submitFileForm">确 定</el-button>
                    <el-button @click="upload.open = false">取 消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
    import { ElMessage } from 'element-plus';
    import { ref, reactive, defineProps } from 'vue';

    const props = defineProps({
        uploadUrl: {
            type: String,
            required: true
        },
        templateFileName: {
            type: String,
            required: true
        }
    });
    const baseApi = import.meta.env.VITE_BASE_IMG_URL;

    const upload = reactive({
        url: props.uploadUrl,
        open: false,
        isUploading: false
    });

    const uploadRef = ref(null);

    const handleInput = () => {
        upload.open = true;
    };

    const handleExceed = () => {
        ElMessage.error('最多只能上传一个文件！');
    };

    const submitFileForm = async () => {
        try {
            if (uploadRef.value) {
                upload.isUploading = true;
                uploadRef.value.submit();
            }
        } catch (error) { console.log(error); }
    }
    const importTemplate = () => {
        try {
            const fileName = props.templateFileName;
            const filePath = `${baseApi}/nfj/template/${fileName}`;
            const link = document.createElement('a');
            link.href = filePath;
            link.download = fileName;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        } catch (error) {
            console.error('下载模板失败:', error);
        }
    };

    const submitFormSuccess = (response) => {
        upload.open = false;

        console.log(window.location.pathname);


        ElMessage.success('文件导入成功');
        location.reload();
    };

    const submitFormFailure = (error) => {
        upload.open = false;
        upload.isUploading = false;
        let errorMessage = '文件导入失败，请检查文件格式或网络连接';

        try {
            error = error.toString();
            error = error.split('UploadAjaxError:')[1];
            const parsedError = JSON.parse(error);
            errorMessage = parsedError.message || errorMessage;
        } catch (parseError) {
            console.error('Error parsing the error message:', parseError);
        }

        ElMessage.error(errorMessage);
    };
</script>


<style scoped>
    /* 添加样式 */
        .filter-item {
            display: inline-block;
            /* vertical-align: middle; */
            /* margin-bottom: 10px; */
        }
</style>